<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色组</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md3">
        <ul id="roleGroupTree"></ul>
    </div>
    <div class="layui-col-md9">
        <input hidden="hidden" id="nodeId" name="nodeId">
        <div class="demoTable">
            <button id="roleGroupAdd" class="layui-btn" data-type="add">新增</button>
        </div>
        <table id="roleGroupList" lay-filter="roleGroupList"></table>
    </div>
</div>
<script th:src="@{/static/layui/layui.all.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<!-- ZTree树形插件 -->
<link rel="stylesheet" th:href="@{/static/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
<script type="text/javascript" th:src="@{/static/zTree_v3/js/jquery.ztree.all.js}"></script>
<script type="text/javascript" th:inline="javascript">

    //进行setting设置；
    var setting = {
        treeNodeKey: "id",               //在isSimpleData格式下，当前节点id属性
        treeNodeParentKey: "pId",        //在isSimpleData格式下，当前节点的父节点id属性
        showLine: true,                  //是否显示节点间的连线
        checkable: true                //每个节点上是否显示 CheckBox
    };
    //进行zNodes的设置，对它进行赋值，也可以从后台获取，为方便在这里采用直接赋值；
    var zNodes = [
        {
            name: "父节点1", open: true, children: [
                { name: "子节点1" }, { name: "子节点2" }]
        },
        {
            name: "父节点2", open: true, children: [
                { name: "子节点1" }, { name: "子节点2" }]
        }
    ];



    var ctxPath = /*[[@{/}]]*/ '';

    layui.use(['table','form','tree'],function () {
        var table = layui.table,tree = layui.tree,form = layui.form,$ = layui.$;

        var zTreeObj = $.fn.zTree.init($("#roleGroupTree"), setting, zNodes);

        $("#roleGroupAdd").on('click', function(){
            layer.open({
                title: '角色组新增',
                type: 2,
                area: ['600px', '300px'],
                content: ctxPath + '/roleGroup/toAdd/' + $("#nodeId").val(),
                end:function(){
                    table.reload('roleGroupList');
                }
            });
        });

    });

</script>
</body>
</html>